(function($){
        $.fn.hongunViewer = function(maxw,list){
                var _image = {
                start : true,
                layerh : 0,
                layert : 0,
                width : 0,
                height : 0,
                leng : 0,
                list : [],
                left : 0,
                top : 0,
                next : "/img/jquery/next.gif",//next image
                prev : "/img/jquery/prev.gif",// prev image
                close : "/img/jquery/close.gif"//close image
            }
            var j = this;
            if(list){
                _image.list = list;
                loading();
            }
            function loading(){// start loading image
                
                if(!$(".imgLayer").length)
                    $("body").append(imgLayer());
                $(".closeBtn").click(function(){
                    $("#overPg").remove();
                    $(".imgLayer").animate({
                        top : "-3000"
                    },function(){
                        _image.start = true;
                        $("#overlay").remove();
                        $(".imgLayer").remove();
                        
                    });
                });
                $("#paging").empty();
                $("#centerimg").html("<div style='text-align:center;'>loading...</div>");
                
                var img = new Image();
                img.onload = function() {
                    if(maxw < img.width){
                        _image.width = maxw;
                        _image.height = img.height / (img.width / maxw);
                    }else{
                        _image.width = img.width;
                        _image.height = img.height;
                    }
                    _image.layerw = parseInt(_image.width + 40);
                    _image.layerh = parseInt(_image.height + 60);
                    imgCenter();
                    show();
                    img.onload=function(){};
                };
                img.src = _image.list[_image.leng];
            }
                
            function show(){
                //scrollTo(0,_image.top);
                $.overlay();
                if(_image.start)
                    $(".imgLayer").bodyCenter();
                _image.start = false;
                
                $(".imgLayer").animate({
                    top : _image.top,
                    left : _image.left,
                    width : _image.layerw,
                    height : _image.layerh
                },500,function(){
                    $.overlay();
                    
                    $("#centerimg").css("opacity",0);
                    $("#centerimg").html("<div style='text-align:center;'><img src='"+_image.list[_image.leng]+"'></div>");
                    $("#centerimg img").css("width",_image.width);
                    $("#centerimg").animate({
                        opacity : 1
                    },function(){
                        if(_image.list.length > 1){
                            $("#paging").html("Image "+parseInt(_image.leng + 1)+" of "+_image.list.length);
                            var ppv = "";
                            var ppn = "";
                            if(_image.leng != 0)
                                ppv = "<img src='"+_image.prev+"' class='pprev'>";

                            if(parseInt(_image.leng + 1) < _image.list.length)
                                ppn = "<img src='"+_image.next+"' class='pnext'>";
                            
                            
                            if(!$("#overPg").length){
                                $("body").append("<div id='overPg' style='z-index:100;width:"+_image.width+"';height:400px;'><div style='float:left;'>"+ppv+"</div><div style='float:right;'>"+ppn+"</div></div>");
                                $("#overPg").css("opacity","0.3");    
                                $("#overPg").bodyCenter("imgLayer");
                            }
                            
                            $("#overPg").hover(function(){
                                $("#overPg").css("opacity","0.6");    
                            },function(){
                                $("#overPg").css("opacity","0");    
                            });
                            
                            $("#imgLayer").hover(function(){
                                $("#overPg").css("opacity","0.6");    
                            },function(){
                                $("#overPg").css("opacity","0");    
                            });
                            
                            
                            
                            $(".pprev").click(function(){
                            if(_image.leng > 0){
                                _image.leng = _image.leng - 1;
                                $("#overPg").remove();
                                loading();
                                
                            }

                            });
                            $(".pnext").click(function(){
                                if(_image.leng < parseInt(_image.list.length - 1)){
                                    _image.leng = _image.leng + 1;
                                    $("#overPg").remove();
                                    loading();
                                }
                            });


                                
                            /*
                            $(".imgLayer").animate({
                                height : parseInt(_image.height + 100)
                            },function(){
                                $("#paging").append("<span><img src='"+_image.prev+"' class='pprev'></span>&nbsp;Image "+parseInt(_image.leng + 1)+" of "+_image.list.length+"&nbsp;<span><img src='"+_image.next+"' class='pnext'></span>");
                                $(".pprev").click(function(){
                                    if(_image.leng > 0){
                                        _image.leng = _image.leng - 1;
                                        loading();
                                        
                                    }

                                });
                                $(".pnext").click(function(){
                                    if(_image.leng < parseInt(_image.list.length - 1)){
                                        _image.leng = _image.leng + 1;
                                        loading();
                                    }
                                });
                            });
                            */
                        }
                    })
                });
            }
            
            function imgCenter(){
                var win = $(window);
                var x = win.width();
                var y = win.height();
                _image.left = win.scrollLeft() + x/2 - _image.layerw/2;
                if(_image.start)
                    _image.top = win.scrollTop() + y/2 - _image.layerh/2;
                else
                    _image.top = _image.top;
                
                    if(_image.top < 0){
                    _image.top = 50;
                }
            }

            function imgLayer(){ // viewerLayer
                var text = "<div class='imgLayer' id='imgLayer' style='z-index:100;'>";
                text += "<div id='layerTop' style='text-align:right;padding:5px 5px 0px 0px'><img src='"+_image.close+"' class='closeBtn'></div>";
                text += "<div id='centerimg'></div>";
                text += "<div id='paging' style='text-align:center;padding:5px 0px 0px 0px;'></div>";
                text += "</div>";
                return text;
            }
            if($(this).find('img').length){            
                $(this).find("img").each(function(index){
                    _image.list.push($(j).find("img").eq(index).attr("src"));
                    $(this).click(function(){
                        _image.leng = index;
                        loading();
                    });
                });
            }

            /// image viewer start
            $.overlay = function(){
                if($("#overlay").length)
                    $("#overlay").remove();
                var arrayPageSize = $.getPageSize();
                $("body").append("<div id='overlay'></div>");
                $("#overlay").css("position","absolute");
                $("#overlay").css("background","#3A3434");
                $("#overlay").css("top","0");
                $("#overlay").css("left","0");
                $("#overlay").css("zIndex",90);
                $("#overlay").css("width",arrayPageSize[0]);
                $("#overlay").css("opacity","0.8");
                $("#overlay").css("height",parseInt(arrayPageSize[1] + 100)+'px');
            }
            
            $.getPageSize = function(){
                var xScroll, yScroll;
                if (window.innerHeight && window.scrollMaxY) {    
                    xScroll = document.body.scrollWidth;
                    yScroll = window.innerHeight + window.scrollMaxY;
                } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
                    xScroll = document.body.scrollWidth;
                    yScroll = document.body.scrollHeight;
                } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
                    xScroll = document.body.offsetWidth;
                    yScroll = document.body.offsetHeight;
                }
                
                var windowWidth, windowHeight;
                if (self.innerHeight) {    // all except Explorer
                    windowWidth = self.innerWidth;
                    windowHeight = self.innerHeight;
                } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
                    windowWidth = document.documentElement.clientWidth;
                    windowHeight = document.documentElement.clientHeight;
                } else if (document.body) { // other Explorers
                    windowWidth = document.body.clientWidth;
                    windowHeight = document.body.clientHeight;
                }    
                
                // for small pages with total height less then height of the viewport
                if(yScroll < windowHeight){
                    pageHeight = windowHeight;
                } else {
                    pageHeight = yScroll;
                }

                // for small pages with total width less then width of the viewport
                if(xScroll < windowWidth){    
                    pageWidth = windowWidth;
                } else {
                    pageWidth = xScroll;
                }
                arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
                return arrayPageSize;
            }
            // image viewer end
            
        }
        $.fn.bodyCenter = function(id){
            $(this).css("position","absolute");
            var win = $(window);
            var ts = $(this);
            var x = win.width();
            var y = win.height();
            if(!id){
                var left = win.scrollLeft() + x/2 - ts.width()/2;
                var top = win.scrollTop() + y/2 - ts.height()/2;
            }else{
                var po = $("#"+id).position();
                var top = parseInt((($("#"+id).height() / 2) + po.top) - (ts.height() / 2));
                var left = parseInt((($("#"+id).width() / 2) + po.left) - (ts.width() / 2));
            }
            $(this).css("left",left);
            $(this).css("top",top);
        }
    })(jQuery);

   $(function(){
      $("#imgArea").hongunViewer(800);
  });
